<!-- 旅行社推荐客户分页列表 -->
<template>
    <div class="travel-rec-cus-list">
        <div ref="dgtools" class="filter-container">
            <el-form 
                :model="dg.ps" 
                :inline="true" 
                @keyup.enter.native="getDgList">
                <el-form-item>
                    <el-date-picker
                        v-model="dg.ps.sedate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 220px"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-input
                        style="width: 220px"
                        clearable
                        placeholder="姓名/电话/单位名称"
                        v-model="dg.ps.find">
                    </el-input>
                </el-form-item>

                <el-button 
                    type="primary" 
                    icon="el-icon-search" 
                    @click="getDgList">
                    搜索
                </el-button>
                <!-- <el-button 
                    type="primary" 
                    icon="el-icon-tickets" 
                    @click="setRecedOrderListMd({state: true})">
                    订单列表
                </el-button> -->
            </el-form>

            <TableSelfSet 
                v-if="dg.columns.length > 0" 
                :tbTitle="'旅行社推荐客户列表'" 
                :dgName="dg.dgName" 
                :tbId="dg.tbName" 
                :srcCols="dg.srcCols" 
                :columns="dg.columns" 
                @saveSet="saveTbSet"
            />
        </div>
        <el-table
            :ref="dg.tbName"
            :data="dg.list"
            row-key="id"
            :height="bodyHeight"
            border fit 
            :row-class-name="rowClassName"
            @header-dragend="dragHeader"
            @selection-change="selRowChange">
            <el-table-column 
                fixed="left" 
                type="index" 
                label="编号" 
                width="40" 
                align="center">
            </el-table-column>
            <!-- <el-table-column 
                fixed="left" 
                type="selection" 
                width="40" 
                align="center">
            </el-table-column> -->

            <el-table-column 
                v-for="(col, index) in dg.columns" 
                :key="index"
                :class-name="dg.dgName"
                :prop="col.field"
                :label="col.label"
                :width="col.width">
                <template slot-scope="{row}">
                    <span v-if="col.field == 'atime'">
                        {{row.atime}}
                    </span>

                    <div v-if="col.field == 'action'">
                        <el-button 
                            type="text" 
                            @click="setRecedOrderListMd({state: true, uname: row.baseUserId.uname})">
                            订单列表
                        </el-button>
                    </div>

                    <template v-else>{{ getColVal(row, col.field) }}</template>
                </template>
            </el-table-column>
        </el-table>
        <Pagination 
            v-show="dg.total > 0" 
            :total="dg.total" 
            :page.sync="dg.ps.page" 
            :limit.sync="dg.ps.rows" 
            @pagination="getDgList"
        />

        <TravelRecedOrderList 
            v-if="recedOrderListMd.state"
            :myData="recedOrderListMd"
            @myClick="setRecedOrderListMd" 
        />
            
    </div>
</template>

<script>
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import elDragDialog from '@/directive/el-drag-dialog';
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from '@/components/Pagination';

import TravelRecedOrderList from './travel-reced-order-list';

import * as financeService from '@/api/services/travel/finance.service';

export default {
    name: 'TravelRecCusList',
    mixins: [ DataGridBase, DataGridResize],
    directives: { elDragDialog },
    components:{ TableSelfSet, Pagination, TravelRecedOrderList },
    data() { 
        let cols = [
            { label: "用车单位", field: "companyUserId.companyName" },
            { label: "用户姓名", field: "baseUserId.realName" },
            { label: "用户手机号", field: "baseUserId.phone" },
            { label: "添加时间", field: "baseUserId.atime", width: 130 },
            { label: "操作", field: "action", width: 100 },
        ];

        return {
            dg: {// 数据列表参数
                dgName: 'dg',
                tbName: 'travelRecedOrderListTb',
                total: 0,
                list: [],
                srcCols: cols,
                columns: [],
                selRows: [],
                ps: { // 过滤参数
                    page: 1, rows: 20,
                    // 查询起止日期
                    sedate: [],
                    // 姓名/电话/单位名称
                    find: '',
                },

            },

            // 被推荐人订单列表-弹框
            recedOrderListMd: {state: false},
        }
    },
    created() {
        const that = this;

        that.initTbSetData(that.dg.dgName);
        that.getDgList();
    },
    methods:{
        /** 获取-列表数据 */
        getDgList(){
            const that = this, ps = that.U.scopy(that.dg.ps);

            ps.stime = ps.sedate?.length ? ps.sedate[0] : '';
            ps.etime = ps.sedate?.length ? ps.sedate[1] : '';
            delete ps.sedate;

            financeService.recCusPage(ps).then(res => {
                if(res.code == 1){
                    let list = res.data;

                    list.forEach(it => { it.dgName = that.dg.dgName; });
                
                    that.dg.list = list;
                    that.dg.total = res.count;
                }
            });
        },

        /** 打开/关闭-被推荐人订单列表-弹框 */
        setRecedOrderListMd(e){
            const that = this, md = that.recedOrderListMd;
            
            md.uname = e.uname;
            md.state = e.state;
        },
        
    },
 }
</script>